<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/markdown-it@12.2.0/dist/markdown-it.min.js"></script>


<script src="../../node_modules/markdown-it-emoji/dist/markdown-it-emoji.js"></script>
<!--<script src="../../node_modules/markdown-it-emoji/dist/markdown-it-emoji-light.js"></script>-->

<div id="markdownbox"></div>
<script>
  var md = window.markdownit();


  md.use(
    window.markdownitEmoji,
    {

    }
  )
  /*
  Options are not mandatory:

  defs (Object) - rewrite available emoji definitions
    - example: { name1: char1, name2: char2, ... }
  enabled (Array) - disable all emojis except whitelisted
  shortcuts (Object) - rewrite default shortcuts
    - example: { "smile": [ ":)", ":-)" ], "laughing": ":D" }
  */


  //todo By default, emojis are rendered as appropriate unicode chars. But you can change the renderer function as you wish.
  //Render as span blocks (for example, to use a custom iconic font):
  md.renderer.rules.emoji = function(token, idx) {
    return '<span class="emoji emoji_' + token[idx].markup + '"></span>';
  };

  //Or use twemoji:
/*
  var twemoji = require('twemoji')

  md.renderer.rules.emoji = function(token, idx) {
    return twemoji.parse(token[idx].content);
  };
*/
  //NB 1. Read twemoji docs! In case you need more options to change image size & type.
  //  + https://github.com/twitter/twemoji#string-parsing
  //NB 2. When using twemoji you can make image height match the line height with this style:
  /*
    .emoji {
      height: 1.2em;
    }
  */

  //shortcuts: https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/shortcuts.js
  //
  //支持的所有表情: https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.json
  //             要用什么直接在这里↑拷 即可
  var result = md.render(
    `:) >:( >:-( 😀 🧡
`);
  console.log('result:',result);
  markdownbox.innerHTML = result;
</script>
</body>
</html>
